<template>
  <div id="Task">
    <Filters
      block
      :form="searchForm"
      :filterData="filterData"
      @confirm="changePage(1)"
    />
    <div class="container">
      <DataTable
        rowKey="ncProjectId"
        :btns="btns"
        :tableData="Data"
        :tableColumn="tableColumn"
        :pageConfig="pageConfig"
        :rowSelection="rowSelection"
        @refresh="getList"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { PROJECT_EXPORT, PROJECT_IMPORT } from '@/api/global';
import util from '@/util/util';

@Component
export default class Task extends Vue {
  searchForm: any = {
    searchValue: '',
    date: []
  }
  btns: any[] = [
    {
      label: '导入',
      upload: true,
      action: util.getApiUrl() + PROJECT_IMPORT,
      accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel',
      icon: 'download',
      callback: (res: any) => this.uploadSuccess(res)
    },
    // {
    //   label: '同步'
    // },
    {
      label: '删除',
      callback: this.delBatch
    },
    {
      label: '导出',
      icon: 'export',
      callback: this.exportList
    }
  ]
  Data: any[] = []
  tableColumn: any = {
    code: {
      label: '项目编码',
      minWidth: 120
    },
    ncProjectName: {
      label: '项目名称',
      minWidth: 120
    },
    createTime: {
      label: '创建时间',
      minWidth: 100
    },
    adminName: {
      label: '创建人',
      minWidth: 100
    },
    action: {
      label: '操作',
      width: 230,
      template: [
        {
          tag: 'a',
          text: '删除',
          callback: this.delHandle
        }
      ]
    }
  }
  selectedRowKeys: any = []
  pageConfig: any = {
    current: 1,
    total: 10,
    pageSize: 10,
    onChange: this.changePage
  }
  selectArr: any = []
  get filterData () {
    return {
      date: {
        label: '创建时间',
        type: 'daterange',
        template: {
          clearable: true
        }
      },
      searchValue: {
        label: '项目名称/项目编码',
        type: 'input',
        template: {
          placeholder: '请输入项目名称/项目编码',
          clearable: true
        }
      }
    }
  }
  get rowSelection () {
    return {
      selectedRowKeys: this.selectedRowKeys,
      onChange: this.changeSelection
    };
  }
  init () {
    this.getList()
  }
  getSearchForm () {
    let searchForm = JSON.parse(JSON.stringify(this.searchForm));
    let { date } = searchForm;
    let { current, pageSize } = this.pageConfig
    let form = Object.assign(searchForm, {
      page: current,
      size: pageSize,
      startTime: (date && date[0]) || '',
      endTime: (date && date[1]) || ''
    });
    delete form.date;
    return form;
  }
  getList () {
    let data = this.getSearchForm()
    this.$api.projectProjectListFetch(data).then((res: any) => {
      this.Data = res.data.records
      this.pageConfig.total = res.data.total
      if (!this.Data.length && this.pageConfig.current > 1) {
        --this.pageConfig.current
        this.getList()
      }
    })
  }
  changePage (val: number) {
    this.pageConfig.current = val
    this.getList()
  }
  searchHandle () {
    this.pageConfig.current = 1
    this.getList()
  }
  delHandle ({ ncProjectId }: any) {
    let data = { id:ncProjectId }
    this.$api.projectDeleteFetch(data).then((res: any) => {
      this.$message.success('删除成功')
      this.getList()
    })
  }
  delBatch () {
    if (!this.selectArr.length) return this.$message.error('请选择数据')
    let id = this.selectArr.map((item: any) => item.ncProjectId).join(',')
    let data = { id }
    this.$confirm({
      title: '提示',
      content: '确定删除？',
      onOk: () => {
        this.$api.projectDeleteFetch(data).then((res: any) => {
            this.$message.success('删除成功')
            this.selectedRowKeys = []
            this.selectArr = []
            this.getList()
        });
      }
    })
  }
  // 选择删除
  changeSelection (selectedRowKeys: any, selectedRows: any[]) {
    console.log(selectedRows,"=")
    this.selectedRowKeys = selectedRowKeys;
    this.selectArr = selectedRows
  }
  // 导出
  exportList () {
    let form = this.getSearchForm();
    util.exportExcelFun(form, PROJECT_EXPORT);
  }
  // 导入
  uploadSuccess (res: any) {
      if (res.code === 0) {
          this.getList() // 重新请求核对信息列表数据
      } else {
          this.$message.error(res.msg)
      }
  }
}
</script>

<style lang="scss">
</style>
